<template>
    <div id="Tap" ref="Tap">
            <div class="Box-top box" ref="demo">
                <p>
                    <i class="iconfont icon-zhibo"></i>
                    <span></span>
                </p>
                <div class="seach">
                    <em class="iconfont icon-sousu"></em>
                    <input type="text" placeholder="幽门螺杆菌感染有什么症状都会发生fish哦热">
                </div>
                <p><i class="iconfont icon-tianjia"></i></p>
            </div>
            <div class="Box-bottom box">
                <nav>
                    <li>
                        关注
                        <span></span>
                    </li>
                    <li class="active">
                        推荐
                    </li>
                    <li>
                        热榜
                    </li>
                    <li>
                        视频
                    </li>
                    <li>
                        圈子
                    </li>
                </nav>
            </div>

    </div>
</template>

<script>
    export default {
        name: "Nav",
        methods: {
        },
        mounted(){
          // let dom=document.querySelector(".Box-top");//====this.$refs.top：获取refdom元素
           let domheight=this.$refs.demo.offsetHeight;
           console.log(domheight);
           // this.$refs.Tap.style.position="fixed";
           this.$refs.Tap.style.top=-domheight/100+"rem";
        }
    }
</script>

<style scoped>
    #Tap{
        position: sticky;
        top: -0.48rem;
    }
    .active{
        font-size: 0.19rem;
        font-weight: bold;
        color: #000!important;
        position: relative;
    }
    span{
        width: 0.07rem;
        height: 0.07rem;
        background-color: #ea1f19;
        display: block;
        border-radius: 50%;
        position: absolute;
        right: -0.02rem;
        top: -0.03rem;
    }
    .box{
        padding: 0 0.15rem;

        background-color: #ffffff;
    }
    .Box-top{
        width: 100%;
        display: flex;
        padding: 0.1rem 0.17rem 0.08rem;
        justify-content: space-between;
        align-items: center;
    }
    .Box-top p{
        position: relative;
    }
    .Box-top p:nth-of-type(1) i{
        color: #0b0b0b;
    }
    .Box-top p:nth-of-type(2) i{
        color: #23aeff;
    }
    i{
        font-size: 0.26rem;
    }
    .seach{
        width: 2.4rem;
        height: 0.3rem;
        background: #f6f6f6;
        padding:0  0.16rem;
        border-radius: 0.15rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .seach em{
        color: #797979;
        margin-right: 0.16rem;
        font-weight: bold;
        font-size: 0.17rem;
    }
    .seach input{
        width: 1.6rem;
        height: 100%;
        padding: 0.06rem 0;
        outline: none;/*点击后的默认聚焦不发生*/
        border-width: 0;
        background: #f6f6f6;
        display: block;
        box-sizing: border-box;
        /*文本过长显示社公略号*/
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .seach input::placeholder{
        color: #505050;
        font-size: 0.17rem;
    }

    .Box-bottom{
        width: 100%;
        /*position: -webkit-sticky;*/
        /*position: sticky;*/
        /*top: 0;*/
        border-bottom: 2px solid #e7e7e7;
    }
    .Box-bottom nav{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0.09rem 0.01rem;
    }
    .Box-bottom nav li{
        margin-right: 0.32rem ;
        color: #6d6d6d;
    }
    li:nth-of-type(1){
        position: relative;
    }
</style>